/*
  学习目标：useEffect-给函数式组件,提供生命周期
    1. 挂载后
    2. 更新后
    3. 卸载前
  
*/

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  // 第二个是空数组, 代表挂载后
  // 等价于: componentDidMount
  // 场景: 1. 发请求  2. 最新获取dom  3. 监听事件等
  // useEffect(() => {
  //   console.log('count  ----->  ', count);
  //   document.title = count;
  // }, []);

  // 第二个参数是[依赖项], 代表: 挂载、更新二合一
  // 等价于 componentDidMount 和 componentDidUpdate二合一
  // 类似： vue中watch开启了immediately
  useEffect(() => {
    console.log('count  ----->  ', count);
    document.title = count;
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>点我+1</button>
    </div>
  );
}
